/**
 * TODO:
 * WIP only - need more experimentation in Figma,
 * and less symmetry (different colors have different perceived brightness),
 * especially for status colors.
 */

@utility palette-light {
	/* default foreground */
	--palette-fg: var(--color-stone-900);
	--palette-fg-100: var(--color-stone-600);

	/* default background */
	--palette-bg: var(--color-stone-50);
	--palette-bg-100: var(--color-stone-200);
	--palette-bg-200: var(--color-stone-400);

	/* elements */
	--palette-placeholder: var(--color-stone-400);
	--palette-link: var(--color-svelte);

	/* primary */
	--palette-primary: var(--color-orange-500);
	--palette-primary-fg: var(--color-orange-800);
	--palette-primary-bg: var(--color-orange-200);
	--palette-primary-shadow: var(--color-orange-900);

	/* secondary */
	--palette-secondary: var(--color-sky-500);
	--palette-secondary-fg: var(--color-sky-800);

	/* outline */
	--palette-outline: var(--color-stone-400);
	--palette-outline-100: var(--color-stone-300);
	--palette-outline-focus: var(--color-blue-500);

	/* status */
	--palette-info-fg: var(--color-sky-900);
	--palette-info-bg: var(--color-sky-100);
	--palette-info-bg-100: var(--color-sky-200);
	--palette-info-bg-200: var(--color-sky-300);

	--palette-success-fg: var(--color-emerald-900);
	--palette-success-bg: var(--color-emerald-100);
	--palette-success-bg-100: var(--color-emerald-200);
	--palette-success-bg-200: var(--color-emerald-300);

	--palette-warning-fg: var(--color-yellow-900);
	--palette-warning-bg: var(--color-yellow-100);
	--palette-warning-bg-100: var(--color-yellow-200);
	--palette-warning-bg-200: var(--color-yellow-300);

	--palette-error-fg: var(--color-red-900);
	--palette-error-bg: var(--color-red-100);
	--palette-error-bg-100: var(--color-red-200);
	--palette-error-bg-200: var(--color-red-300);
}

@utility palette-dark {
	/* default foreground */
	--palette-fg: var(--color-stone-50);
	--palette-fg-100: var(--color-stone-400);

	/* default background */
	--palette-bg: var(--color-stone-900);
	--palette-bg-100: var(--color-stone-800);
	--palette-bg-200: var(--color-stone-600);

	/* elements */
	--palette-placeholder: var(--color-stone-500);
	--palette-link: var(--color-svelte);

	/* primary */
	--palette-primary: var(--color-orange-500);
	--palette-primary-fg: var(--color-orange-200);
	--palette-primary-bg: var(--color-orange-800);
	--palette-primary-shadow: var(--color-orange-700);

	/* secondary */
	--palette-secondary: var(--color-sky-500);
	--palette-secondary-fg: var(--color-sky-400);

	/* outline */
	--palette-outline: var(--color-stone-600);
	--palette-outline-100: var(--color-stone-700);
	--palette-outline-focus: var(--color-blue-500);

	/* status */
	--palette-info-fg: var(--color-sky-200);
	--palette-info-bg: var(--color-sky-900);
	--palette-info-bg-100: var(--color-sky-800);
	--palette-info-bg-200: var(--color-sky-700);

	--palette-success-fg: var(--color-emerald-200);
	--palette-success-bg: var(--color-emerald-900);
	--palette-success-bg-100: var(--color-emerald-800);
	--palette-success-bg-200: var(--color-emerald-700);

	--palette-warning-fg: var(--color-yellow-200);
	--palette-warning-bg: var(--color-yellow-900);
	--palette-warning-bg-100: var(--color-yellow-800);
	--palette-warning-bg-200: var(--color-yellow-700);

	--palette-error-fg: var(--color-red-200);
	--palette-error-bg: var(--color-red-900);
	--palette-error-bg-100: var(--color-red-800);
	--palette-error-bg-200: var(--color-red-700);
}
